<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>WEBSQL管理系统</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/static/img/favicon.ico}" media="screen"/>
    <link rel="stylesheet" th:href="@{/static/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/static/css/layuimini.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/default.css}" media="all">
</head>
<body class="layui-layout-body layuimini-all">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header header">
        <div class="layui-logo layuimini-logo"></div>

        <div class="layuimini-header-content">
            <a>
                <div class="layuimini-tool"><i title="展开" class="layui-icon layui-icon-shrink-right"
                                               data-side-fold="1"></i></div>
            </a>

            <ul class="layui-nav layui-layout-left layuimini-header-menu layuimini-menu-header-pc layuimini-pc-show">
            </ul>

            <ul class="layui-nav layui-layout-left layuimini-header-menu layuimini-mobile-show">
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-eye"></i> 选择模块</a>
                    <dl class="layui-nav-child layuimini-menu-header-mobile">
                    </dl>
                </li>
            </ul>

            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item version" style="display: none"></li>
                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:;" data-refresh="刷新"><i class="layui-icon layui-icon-refresh-3"></i> </a>
                </li>
                <li class="layui-nav-item" lay-unselect th:if="${siteConfig.enabledHelp==0 ?true:false}">
                    <a href="https://gitee.com/boy_0214/websql/wikis/pages" target="_blank"><i
                            class="layui-icon layui-icon-help"></i> </a>
                </li>
                <li class="layui-nav-item mobile layui-hide-xs" th:if="${siteConfig.enabledLockView==0 ?true:false}"
                    lay-on="more-lockscreen">
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-lock"></i>
                    </a>
                </li>
                <li class="layui-nav-item mobile layui-hide-xs">
                    <div class="layui-form" style="width: 110px;">
                        <select name="teams" id="teams" lay-filter="teams" lay-search="" lay-affix="clear"></select>
                    </div>
                </li>
                <li class="layui-nav-item layuimini-setting">
                    <a href="javascript:;"> [[${users.name}]] </a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;" layuimini-content-href="getUsersPage"
                               data-title="基本资料">基本资料</a>
                        </dd>
                        <dd>
                            <hr>
                        </dd>
                        <dd>
                            <a href="javascript:;" class="login-out">退出登录</a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item layuimini-select-bgcolor" lay-unselect>
                    <a href="javascript:;"><i class="fa fa-ellipsis-v"></i></a>
                </li>
            </ul>
        </div>
    </div>

    <!--无限极左侧菜单-->
    <div class="layui-side layui-bg-green layuimini-menu-left">
    </div>

    <!--初始化加载层-->
    <div class="layuimini-loader">
        <div class="layuimini-loader-inner"></div>
    </div>

    <!--手机端遮罩层-->
    <div class="layuimini-make"></div>

    <!-- 移动导航 -->
    <div class="layuimini-site-mobile"><i class="layui-icon"></i></div>

    <div class="layui-body" style="padding-bottom:20px;">
        <div class="layuimini-tab layui-tab-rollTool layui-tab" lay-filter="layuiminiTab" lay-allowclose="true">
            <ul class="layui-tab-title">
                <li class="layui-this" id="layuiminiHomeTabId" lay-id=""></li>
            </ul>
            <div class="layui-tab-control">
                <li class="layuimini-tab-roll-left layui-icon layui-icon-left"></li>
                <li class="layuimini-tab-roll-right layui-icon layui-icon-right"></li>
                <li class="layui-tab-tool layui-icon layui-icon-down">
                    <ul class="layui-nav close-box">
                        <li class="layui-nav-item">
                            <a href="javascript:;"><span class="layui-nav-more"></span></a>
                            <dl class="layui-nav-child">
                                <dd><a href="javascript:;" layuimini-tab-close="current">关 闭 当 前</a></dd>
                                <dd><a href="javascript:;" layuimini-tab-close="other">关 闭 其 他</a></dd>
                                <dd><a href="javascript:;" layuimini-tab-close="all">关 闭 全 部</a></dd>
                            </dl>
                        </li>
                    </ul>
                </li>
            </div>
            <div class="layui-tab-content">
                <div id="layuiminiHomeTabIframe" class="layui-tab-item layui-show cy-show"></div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/static/layui.js}"></script>
<script th:src="@{/static/lay-config.js}"></script>
<script th:src="@{/static/base64.min.js}"></script>
<script th:replace="~{base::ctx}"></script>
<script>
    layui.use(['jquery', 'layer', 'miniAdmin', 'laySelect', 'form', 'util'], function () {
        const $ = layui.jquery,
            layer = layui.layer,
            miniAdmin = layui.miniAdmin,
            util = layui.util,
            form = layui.form,
            laytpl = layui.laytpl,
            select = layui.laySelect,
            lockKey = "lockscreen",
            activeTeam = "currentUserTeam";

        let options = {
            iniUrl: ctx + "api/init.json",
            urlHashLocation: false,      // 是否打开hash定位
            bgColorDefault: true,      // 主题默认配置
            multiModule: true,          // 是否开启多模块
            menuChildOpen: false,       // 是否默认展开菜单
            loadingTime: 0,             // 初始化加载时间
            pageAnim: true,             // iframe窗口动画
            maxTabNum: 20,              // 最大的tab打开数量
        };
        miniAdmin.render(options);

        getSiteConfig();
        //退出
        $('.login-out').on("click", function () {
            layer.msg('退出成功！', function () {
                window.location = ctx + 'logout';
            });
        });

        /**
         * 锁屏
         */
        util.on('lay-on', {
            'more-lockscreen': function () {
                lockPage();
            }
        });


        /**
         * 检查上锁
         * @type {string}
         */
        let itemLock = localStorage.getItem(lockKey);
        if (itemLock != null && itemLock != undefined && itemLock == 'true') {
            lockPage();
        }

        /**
         * 检查最新版本
         */
        post(ctx + "queryVersion", null, (res) => {
            let data = res.data;
            if (data.push) {
                const content = laytpl('<a href="{{= d.url}}" target="_blank"><i class="layui-badge" style="margin-left: -20px;">{{= d.content}}</i></a>').render({
                    content: data.version,
                    url: data.link
                });
                $(".version").show();
                $(".version").html(content);
            }
        })

        /**
         * 加载当前用户团队
         */
        select.render({
            elem: "#teams",
            url: ctx + 'queryUserTeams',
            select: 10000,
            title: '请选择团队',
            format: function (data) {
                return parseSelectData(data);
            },
            success: function (data, activeData) {
                localStorage.setItem(activeTeam, activeData[0].code);
            },
            onselect: function (data) {
                let active = localStorage.getItem(activeTeam);
                if (active === data || data === '' || data === undefined) {
                    $("#teams").val(active);
                    form.render('select');
                    return;
                }
                post(ctx + "updateUserActiveTeam/" + data, null, (res) => {
                    if (res.code === 200) {
                        localStorage.setItem(activeTeam, data);
                    }
                })
                location.reload();
            }
        });

        /**
         * 锁定屏幕
         */
        function lockPage() {
            layer.open({
                type: 1,
                title: false,
                closeBtn: false,
                area: ['100%', '100%'],
                scrollbar: false,
                anim: -1,
                isOutAnim: false,
                id: 'ID-layer-inst',
                skin: 'class-layer-lockscreen',
                content: ['<div class="layui-form">',
                    '<div class="layui-input-wrap">',
                    '<input type="password" class="class-layer-pin" lay-affix="eye">',
                    '<div class="layui-input-suffix">',
                    '<i class="layui-icon layui-icon-right" id="ID-layer-unlock"></i>',
                    '</div>',
                    '</div>',
                    '<div>输入您的登录密码回车。</div>',
                    '</div>'].join(''),
                success: function (layero, index) {
                    localStorage.setItem(lockKey, true);
                    var input = layero.find('input');
                    form.render();
                    input.focus();
                    var elemUnlock = layero.find('#ID-layer-unlock');
                    elemUnlock.on('click', function () {
                        const param = {
                            "password": input[0].value,
                            "timestamp": new Date().getTime()
                        };
                        let json = Base64.encode(JSON.stringify(param));
                        post(ctx + "unlock", json, (res) => {
                            if (res.code === 200) {
                                localStorage.removeItem(lockKey);
                                layer.close(index);
                                layer.closeLast('dialog');
                            } else {
                                layer.msg('锁屏密码输入有误', {icon: 2, offset: '16px', anim: 'slideDown'})
                                input.focus();
                            }
                        });
                    });
                    input.on('keyup', function (e) {
                        if (e.keyCode === 13) {
                            elemUnlock.trigger('click');
                        }
                    });
                }
            })
        }
    });
</script>
</body>
</html>
